<template>
	<view>
		<u-toast ref="uToast" />
		<common :tips="commonTips"></common>
		<view v-if="loadingShow" class="u-loading">
			<u-loading color="#6388fb" mode="circle"></u-loading>
		</view>
		<u-form ref="uForm">
			<block v-for="(item, index) in form" :key="index">
				<view class="form-item-box">
					<u-form-item :border-bottom="item.borderBottom" v-if="item.type == 'select'" label-position="top" :label="item.title">
						<u-select :default-value="item.value" v-model="item.show" mode="single-column" :list="item.data" @confirm="confirmSelect"></u-select>
						<view @click="openSelect(index)">{{item.data[item.value[0]].label}}</view>
					</u-form-item>
					
					<u-form-item :border-bottom="item.name == 'busy_reply' ? false:true" v-if="item.type == 'text' || item.type == 'textarea'" label-position="top" :label="item.title">
						<u-input :type="item.type" v-model="item.value" :placeholder="'请输入' + item.title" />
					</u-form-item>
					
					<view v-if="item.name == 'busy_reply'" class="box20rpx"></view>
					
					<u-form-item :border-bottom="item.borderBottom" v-if="item.type == 'radio'" label-position="top" :label="item.title">
						<u-radio-group v-model="item.value">
							<u-radio v-for="(item, indexr) in item.content" :key="indexr" :name="indexr">
								{{ item }}
							</u-radio>
						</u-radio-group>
					</u-form-item>
				</view>
			</block>
			<u-button v-if="form.length" :loading="submitButtonStatus" :disabled="submitButtonStatus" class="submit-button" type="primary" @click="submit">保存</u-button>
		</u-form>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				userinfo: [],
				form: [],
				openSelectName: false,
				submitButtonStatus: false,
				loadingShow: true,
				commonTips: ''
			}
		},
		onLoad() {
			this.userinfo = uni.getStorageSync('userinfo');
			this.pageDataLoad();
		},
		onShow() {
			this.ws.checkNetwork(this)
		},
		methods: {
			submit() {
				this.submitButtonStatus = true
				const values = {}
				this.form.forEach(item => {
					if (item.type === 'select') {
						values[item.name] = item.data[item.value[0]].value
					} else {
						values[item.name] = item.value
					}
				})

				this.ws.pageFun(() => {
					const message = { c: 'ImBase', a: 'updateUserConfig', data: values }
					this.ws.send(message)
					this.ws.showMsgCallback = () => {
						this.ws.initializeData.config.user_config.new_message_shake = values.new_message_shake
						this.ws.initializeData.config.user_config.new_message_sound = values.new_message_sound
						this.ws.initializeData.config.user_config.send_message_key = values.send_message_key
						setTimeout(() => {
							this.submitButtonStatus = false
							uni.navigateBack({ delta: 1 })
						}, 2000)
					}
				}, this)
			},
			openSelect(index, name = false) {
				this.form[index].show = true
				this.openSelectName = name ? name : false
			},
			confirmSelect(value) {
				const data = this.form[value[0].extra].data
				const index = data.findIndex(d => d.value === value[0].value)
				this.form[value[0].extra].value = [index]
			},
			pageDataLoad() {
				this.$u.get(this.ws.buildUrl('get-config-item-data', this.userinfo.token), {}).then(res => {
					this.loadingShow = false
					let general = res.data.imConfigGroup.general.list
					const lastIndex = general.length - 1

					// 👇 过滤掉不想显示的 name
					const hiddenFields = ['login_status', 'busy_reply', 'send_message_key']
					general = general.filter(item => !hiddenFields.includes(item.name))

					general.forEach((item, g) => {
						item.borderBottom = (g === general.length - 1) ? false : true

						if (item.name === 'send_message_key') {
							item.content[1] = '发送键'
						}
						if (item.name === 'login_status') {
							item.title = '登录后状态'
						}

						if (item.type === 'select') {
							item.show = false
							item.data = item.content.map((label, i) => ({
								value: i,
								label,
								extra: g
							}))
							item.value = [parseInt(item.value[0])]
						} else if (item.type === 'text') {
							item.type = 'textarea'
						} else if (item.type === 'string') {
							item.type = 'text'
						}
					})

					this.form = general
				})
			}
		}
	}
</script>

<style lang="scss">
page {
	background-color: $--bg-color;
}
.form-item-box {
	width: 100vw;
	background-color: $--white;
	padding: 0 5vw;
}
.form-item {
	border-bottom: 1px solid red;
}
.box20rpx {
	height: 20rpx;
	width: 100vw;
	background-color: $--bg-color;
	margin-left: -5vw;
}
.submit-button {
	width: 60vw;
	display: block;
	margin: 40rpx auto;
}
.u-loading {
	display: flex;
	align-items: center;
	justify-content: center;
	margin-top: 60rpx;
}
</style>
